<template>
    <div>
        <van-tree-select 
        v-model:main-active-index="active" 
        height="55vw" 
        :items = "items"
        @click-nav="navClick"
        >
            <template #content>
                <div v-for="(i,index) in subItem">
                    <FoodItem :food="i">

                    </FoodItem>

                </div>
            </template>
        </van-tree-select>
    </div>
</template>

<script >
import {reactive,toRefs,onMounted} from 'vue'
import FoodItem from './FoodItem.vue'

export default{
    props:['foodData'],
    components:{FoodItem},
    setup(props){

        //构建数据
        const data = reactive({
            items:[],
            subItem:[],
            active:0

        })

        //初始化
        const init = () => {
            data.items = []
            props.foodData.items.map((i,index)=>{
                data.items.push({'text':i.text})
                if(data.active === index){
                    data.subItem = i.children
                }
            })
        }
        init()

        //左边一级导航改变
        const navClick = (index) => {
            data.active = index
            init()
        }

        return {
           ...toRefs(data),
           navClick
        }
    }
}

</script>